<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部区域 -->
      <page-tools :show-before="true">
        <span slot="before">共{{ total }}条记录</span>
        <template v-slot:after>
          <el-button type="danger" @click="exportFn">普通excel导出</el-button>
          <el-button type="info">复杂excel头导出</el-button>
          <el-button
            type="success"
            @click="$router.push('/import')"
          >excel导入</el-button>
          <el-button
            type="primary"
            @click="showDialog = true"
          >新增员工</el-button>
        </template>
      </page-tools>
      <!-- tabs表格 -->
      <el-card>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          header-align="center"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="username" label="姓名" width="150" sortable />
          <el-table-column label="头像" width="150">
            <template slot-scope="scope">
              <img
                v-imagerror="defaultImg"
                :src="scope.row.staffPhoto"
                style="width: 100px; height: 100px; border-radius: 50%"
                @click="showImgFn(scope.row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="150" sortable />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="150"
            sortable
          />
          <el-table-column label="聘用形式" width="150">
            <template v-slot="scope">
              <span v-html="formOfEmploymentFn(scope.row.formOfEmployment)" />
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" width="150" />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="150"
            sortable
          />
          <el-table-column prop="address" label="状态" width="150" sortable>
            <template>
              <el-switch v-model="value" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="obj">
              <el-button
                type="text"
                @click="
                  $router.push({
                    name: 'detail',
                    params: {
                      id: obj.row.id,
                    },
                  })
                "
              >查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text" @click="assignFn(obj.row.id)">角色</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="removeFn(obj.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            :current-page="page"
            @current-change="changeFn"
          />
        </el-row>
      </el-card>
      <add-emplayess :dialog-show.sync="showDialog" />
      <el-dialog title="二维码" :visible.sync="dialogVisible">
        <el-row type="flex" justify="center">
          <canvas ref="mycanvans" />
        </el-row>
      </el-dialog>
      <assoign ref="myassigin" :role-show="roleShow" :user-id="userId" />
    </div>
  </div>
</template>

<script>
import { getusersAPI, removeuserAPI } from '@/api/employees'
import QrCode from 'qrcode'
import addEmplayess from './components/add-emplayess.vue'
import { timeFormat } from '@/utils/time'
import assoign from './components/assign.vue'
export default {
  components: {
    addEmplayess,
    assoign
  },
  data() {
    return {
      page: 1, // 页码数，
      size: 10, // 页码条数
      total: 0, // 总条数
      tableData: [], // 员工列表数组
      value: true, // 状态
      defaultImg: require('@/assets/common/bigUserHeader.png'), // 默认图片
      showDialog: false,
      dialogVisible: false, // 图片二维码对话框
      url: '',
      roleShow: false, // 角色对话框显示隐藏
      userId: null // 角色的id
    }
  },
  computed: { // 计算属性
  },
  created() {
    // 渲染员工列表
    this.getusersFn()
  },
  mounted() {
    this.$bus.$on('ondialogShow', (data) => { // 新增员工 取消时触发的方法
      this.showDialog = data
    })
    this.$bus.$on('submitOkFn', () => { // 新增员工 完成时触发的方法
      // 渲染员工列表
      this.getusersFn()
    })
    this.$bus.$on('assignFn', (data) => {
      this.roleShow = data
    })
  },
  methods: { // 方法
    async getusersFn() { // 获取员工列表方法
      const res = await getusersAPI({
        page: this.page,
        size: this.size
      })
      this.tableData = res.rows
      this.total = res.total
    },
    changeFn(val) { // 页码切换时的方法
      this.page = val
      this.getusersFn()
    },
    formOfEmploymentFn(data) { // 序列表方法
      if (data === '1') {
        return '正式'
      } else if (data === '2') {
        return '非正式'
      } else {
        return '未知'
      }
    },
    async removeFn(data) { // 删除员工方法
      if (this.tableData.length < 2) {
        this.page--
      }
      await removeuserAPI(data.id)
      this.$notify({
        message: '删除员工成功',
        type: 'success'
      })
      // 渲染员工列表
      this.getusersFn()
    },
    async exportFn() {
      const header = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'wordNumber',
        '部门': 'departmentName'
      }
      const { rows } = await await getusersAPI({
        page: 1,
        size: this.total
      })
      const data = this.formattingFn(header, rows)
      // 导出execl
      import('@/vendor/Export2Excel').then(execl => {
        // execl 是引出文件的导出对象
        execl.export_json_to_excel({
          header: Object.keys(header),
          data,
          filename: '员工基本信息列表'
        })
      })
    },
    formattingFn(header, rows) {
      return rows.map(item => {
        return Object.keys(header).map(key => {
          if (header[key] === 'timeOfEntry' || header[key] === 'correctionTime') {
            return timeFormat(item[header[key]])
          } else if (header[key] === 'formOfEmployment') {
            if (item[header[key]] === 1) {
              item[header[key]] = '正式'
            } else if (item[header[key]] === 2) {
              item[header[key]] = '非正式'
            } else {
              item[header[key]] = '未知'
            }
            return item[header[key]]
          } else {
            return item[header[key]]
          }
        })
      })
    },
    showImgFn(src) {
      if (!src) {
        this.$message.warning('该用户没有上传头像')
      } else {
        this.dialogVisible = true
        QrCode.toCanvas(this.$refs.mycanvans, src)
      }
    },
    assignFn(id) {
      this.roleShow = true
      this.userId = id
      // 父组件调用 子组件的方法
      this.$refs.myassigin.getuserFn(id)
    }
  }
}
</script>

<style>
</style>

